<template>
  <div class="container">
    <el-card class="box-card">
      <el-breadcrumb
        class="elIcon"
        v-if="subjects.id && subjects.name"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          subjects.id ? subjects.name : ''
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form
        ref="subjectFrom"
        :model="queryList"
        label-width="80px"
      >
        <el-form-item
          label="标签名称"
          class="demo-form"
        >
          <el-input
            class="inputCol"
            v-model="queryList.tagName"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="状态"
          class="demo-form"
        >
          <el-select
            v-model="queryList.state"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              label="已启用"
              :value="1"
            > </el-option>
            <el-option
              label="已禁用"
              :value="0"
            > </el-option>
          </el-select>
        </el-form-item>
        <el-button
          style="margin: 0 0 0 50px"
          v-if="subjects.id && subjects.name"
          type="text"
          class="colright"
          icon="el-icon-back"
          @click="$router.back()"
        >返回学科</el-button>
        <el-button
          size="small"
          class="colInput"
          plain
          @click="resetInput"
        >清除</el-button>
        <el-button
          size="small"
          class="colInput"
          type="primary"
          @click="list"
        >搜索</el-button>
        <div class="right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            style="margin: 0 0 0 50px"
            @click="editDialogVisible = true"
          >新增标签</el-button>
        </div>
      </el-form>
      <el-alert
        style="margin-top: 15px"
        :title="`共${counts}条记录`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column
          prop="id"
          label="序号"
        > </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
        > </el-table-column>
        <el-table-column
          prop="tagName"
          label="标签名称"
        > </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
        > </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
        >
          <template v-slot=" { row }">
            <!-- 过滤器格式化日期 -->
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180px"
        >
          <template slot-scope="{ row }">
            <el-button
              type="text"
              @click="editState(row)"
            >{{
              row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="editDirectorys(row)"
            >修改</el-button>
            <el-button
              type="text"
              :disabled="row.state === 1"
              @click="removeDir(row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="bottompage"
        :current-page="queryList.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryList.pagesize"
        layout="prev, pager, next,sizes,jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 修改目录弹框 -->
    <el-dialog
      title="修改标签"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="btnCancel"
    >
      <!-- 主体区域 -->
      <el-row>
        <el-col>
          <el-form
            :model="editDirectoryList"
            :rules="rules"
            ref="directorysFormRef"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item
              class="elform"
              label="所属学科"
              v-if="!subjects.id && !subjects.name"
            >
              <el-select
                v-model="editDirectoryList.value"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in addFrom"
                  :key="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="elform"
              label="标签名称"
              prop="tagName"
            >
              <el-input
                v-model="editDirectoryList.tagName"
                placeholder="请输入标签名称"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="btnCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="editDirForm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  changeState,
  remove,
  add,
  update
} from '../../api/hmmm/tags'
import { simple } from '../../api/hmmm/subjects'
export default {
  data () {
    return {
      infoId: '',
      editDirectoryList: {
        tagName: '',
        value: ''
      },
      // 验证
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      },
      editDialogVisible: false, // 弹层
      // 接受数据
      queryList: {
        page: 1,
        pagesize: 10,
        tagName: '',
        state: null
      },
      // 数据列表
      tableData: [],
      // 总条数
      counts: 0,
      addFrom: []
    }
  },
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },

  // 侦听地址栏数据
  watch: {
    '$route.query' () {
      this.list()
    }
  },
  created () {
    this.list()
    this.getAddFrom()
  },
  methods: {
    // 点击修改
    editDirectorys (row) {
      this.editDirectoryList.value = row.subjectID
      // console.log(row)
      this.infoId = row.id // id序号
      this.editDirectoryList.tagName = row.tagName // 标签名称
      this.editDialogVisible = true
    },
    async getAddFrom () {
      try {
        const { data } = await simple()
        console.log(data)
        this.addFrom = data
      } catch (e) {
        console.log(e)
      }
    },
    // 添加确定按钮
    async editDirForm () {
      try {
        if (this.infoId) {
          // 判断有无id和name.
          if (this.subjects.id && this.subjects.name) {
            await update({
              id: this.infoId,
              subjectID: +this.subjects.id,
              tagName: this.editDirectoryList.tagName
            })
            this.$message.success('更新标签成功')
          } else {
            await update({
              id: this.infoId,
              subjectID: this.editDirectoryList.value,
              tagName: this.editDirectoryList.tagName
            })
            this.$message.success('更新标签成功')
          }
        } else {
          if (this.subjects.id && this.subjects.name) {
            await add({
              subjectID: +this.subjects.id,
              tagName: this.editDirectoryList.tagName
            })
            this.$message.success('新增标签成功')
          } else {
            await add({
              subjectID: this.editDirectoryList.value,
              tagName: this.editDirectoryList.tagName
            })
            this.$message.success('新增标签成功')
          }
        }
      } catch (e) {
        console.log(e)
      }
      this.editDialogVisible = false
      this.list()
    },

    // 切换状态
    async editState (row) {
      console.log(row)
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    },
    // 删除
    async removeDir (row) {
      const configRuselt = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }
      try {
        const { data } = await remove(row.id)
        console.log(data)
        this.$message.success('删除成功!')
        this.list()
      } catch (e) {
        this.$message.error('删除失败!')
      }
    },
    // 清除
    resetInput () {
      console.log(this.subjects)
      this.queryList.tagName = ''
      this.queryList.state = null
    },
    // 获取数据
    async list () {
      this.queryList.subjectID = this.subjects.id || null
      const { data } = await list(this.queryList)
      this.tableData = data.items
      this.counts = data.counts
    },
    // 页大小
    handleSizeChange (newSize) {
      this.queryList.pagesize = newSize
      this.list()
    },
    // 页码
    handleCurrentChange (newPage) {
      this.queryList.page = newPage
      this.list()
    },
    // 取消
    btnCancel () {
      this.editDirectoryList = {
        tagName: '',
        value: ''
      }
      // 取消后重置弹层
      this.$refs.directorysFormRef.resetFields()
      this.editDialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 20px;
}
.demo-form {
  width: 30%;
  display: inline-block;
}
.elIcon {
  margin-bottom: 15px;
}
.right {
  float: right;
}
.colInput {
  margin-left: 20px;
}
.bottompage {
  float: right;
}
</style>
